import React from 'react'
import Style from './Chart.module.css'

import { v4 } from 'uuid'
import { eventbus } from 'js-guava'
import * as echarts from 'echarts'

class EReact extends React.Component {
  ID = `er-${v4()}`
  chart = null

  componentDidMount() {
    eventbus.on('resize', this.resize)
    const dom = document.getElementById(this.ID)
    this.chart = echarts.init(dom) 
    this.draw(this.chart)
  }

  componentWillUnmount() {
    eventbus.remove('resize', this.resize)
  }

  resize = () => {
    !!this.chart && this.chart.resize()
  }

  draw(chart) {}
  
  render() {
    const { className } = this.props

    return (
      <div id={this.ID} className={`${Style.React} ${className}`}>
      </div>
    )
  }
}

export default EReact